<template>
  <view class="wrapper">
    <t-header @back="back">{{ title }}</t-header>
    <!-- <tt-navbar :left="true" title="我的自选" rightText="" @lclick="navBack" ></tt-navbar> -->
    <view class="page">
      <view class="list-con rel">
        <view class="flex align-center head">
          <view class="name">名称</view>
          <view class="price text-center" @click="setQury('f2')"
            >最新价
            <template v-if="query.fid == 'f2'">
              <view class="triangle" v-if="query.po == 1">
                <tui-icon :size="24" color="orange" name="turningup"></tui-icon>
                <tui-icon
                  :size="24"
                  color="#D2D2D2"
                  name="turningdown"
                ></tui-icon>
              </view>
              <view class="triangle" v-else>
                <tui-icon
                  :size="24"
                  color="#D2D2D2"
                  name="turningup"
                ></tui-icon>
                <tui-icon
                  :size="24"
                  color="orange"
                  name="turningdown"
                ></tui-icon>
              </view>
            </template>
          </view>
          <view class="up-down text-right" @click="setQury('f3')">
            涨幅
            <template v-if="query.fid == 'f3'">
              <view class="triangle" v-if="query.po == 1">
                <tui-icon :size="24" color="orange" name="turningup"></tui-icon>
                <tui-icon
                  :size="24"
                  color="#D2D2D2"
                  name="turningdown"
                ></tui-icon>
              </view>
              <view class="triangle" v-else>
                <tui-icon
                  :size="24"
                  color="#D2D2D2"
                  name="turningup"
                ></tui-icon>
                <tui-icon
                  :size="24"
                  color="orange"
                  name="turningdown"
                ></tui-icon>
              </view>
            </template>
          </view>
        </view>
        <mescroll-body
          ref="mescrollRef"
          @init="mescrollInit"
          bottom="0"
          :height="height"
          :down="downOption"
          @down="downCallback"
          @up="upCallback"
        >
          <rt-list :list="list"></rt-list>
        </mescroll-body>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
  import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
  import { getZixuan } from '@/api/index.js';
  import rtList from '@/pages/tabbar/comp/rt-list.vue';
  import tHeader from '@/components/views/t-header/index.vue';

  const height = ref('');
  const list = ref([]);
  const query = ref({
    po: 1,
    fid: 'f3',
  });
  const title = ref('我的自选');

  // Mescroll配置
  const { mescrollInit, downCallback, getMescroll } = useMescroll(
    onPageScroll,
    onReachBottom
  );

  // mescroll-body 配置（down && up）
  const downOption = {
    auto: false,
  };
  const upOption = {
    auto: true, // 不自动加载
    noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
    empty: {
      tip: '~ 暂无数据 ~', // 提示
      // btnText: '去看看'
    },
  };
  const back = () => {
    uni.navigateBack();
  };

  onMounted(() => {
    height.value =
      uni.getSystemInfoSync().windowHeight - uni.upx2px(120 * 2) + 'px';
  });

  const setQury = (type) => {
    if (query.value.fid == type) {
      query.value.po = query.value.po == 1 ? 0 : 1;
    } else {
      query.value.po = 1;
    }
    query.value.fid = type;
    downCallback();
  };

  /*下拉刷新的回调 */
  // const downCallback = () => {
  //   getMescroll().resetUpScroll();
  // };

  /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
  const upCallback = (page) => {
    getZixuan({
      page: page.num,
      size: page.size,
      ...query.value,
    }).then((res) => {
      if (page.num == 1) list.value = [];
      if (res.code == 1) {
        if (res.data.list.length) {
          res.data.list.forEach((v) => {
            v.trade = (v.trade * 1).toFixed(2);
            v.changepercent = (v.changepercent * 1).toFixed(2);
            v.code = v.symbol.substring(2);
            v.marketCode = v.symbol.substring(0, 2);
          });
        }
        list.value = list.value.concat(res.data.list); //追加新数据
        // list.value = [
        //  {
        //   name:"广瑞医疗",
        //   code:"15454545",
        //   marketCode:'bj',
        //   changepercent:20,
        //   trade:14
        //  },
        //  {
        //   name:"广瑞医疗",
        //   code:"15454545",
        //   marketCode:'bj',
        //   changepercent:-10,
        //   trade:15
        //  },

        // ]
        page.endSuccess(res.data.list.length);
      } else {
        page.endErr();
      }
    });
  };

  //点击空布局按钮的回调
  const emptyClick = () => {};
</script>
<style lang="scss" scoped>
  .wrapper {
    background: #f5f5f5;
  }
  .nav-box {
    width: 100%;
    height: 152rpx;
    background: linear-gradient(178deg, #e92232 0%, #f6843d 100%);
    padding: 72rpx 42rpx 30rpx 42rpx;
    text-align: center;
    position: relative;
    .tui-icon {
      position: absolute;
      left: 32rpx;
      bottom: 25rpx;
    }
    &-title {
      font-size: 36rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .list-con {
    border-radius: 34rpx;
    background: #fff;
    padding: 0 20rpx;
    margin: 24rpx 16rpx 0 18rpx;
    overflow: hidden;
  }
  .name,
  .price,
  .up-down {
    box-sizing: border-box;
    padding: 30rpx 0 20rpx 0;
    color: #989898;
    font-weight: 400;
    font-size: 32rpx;
  }
  .name {
    width: 50%;
  }
  .price,
  .up-down {
    width: 25%;
    display: flex;
    justify-content: flex-end;
    position: relative;
    padding-right: 40rpx;
    .triangle {
      position: absolute;
      right: 0;
      top: 24rpx;
      display: flex;
      flex-direction: column;
      gap: 2rpx;
      margin-bottom: 12rpx;
      .tui-icon {
        height: 14rpx;
      }
    }
  }

  .head {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 99;
    border-bottom: 2rpx solid #e2e2e2;
  }
</style>
